<template>
  <div class="calender-c">
    <el-calendar v-model="now">
      <template #date-cell="{data}">
        <p>{{data.day.substring(data.day.indexOf('-')+1)}}</p>
        <p v-show="filterExists(data.day)">
          <a :href="'/coach/myCourseDetail?d=' + data.day">今日有课，点击查看</a>
        </p>
      </template>
    </el-calendar>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import storage from "@/utils/storage.ts";
import { getCoachForm, getMyCourseSchedules } from '@/api/coach'
const dateVal = ref([])
const now = ref(new Date());

const courseVisible = ref(false);
const tooltipRef = ref(null);
const buttonRef = ref(null);
const user = ref({})
const coach = ref({})
const filterExists = (day: string) => {
  console.log('filterExists', day);
  return dateVal.value.find(v=>v === day);
}

const viewCourse = () => {
  courseVisible.value = !courseVisible.value
}


onMounted(()=>{
  user.value = JSON.parse(storage.getItem("user"))

  getCoachForm(user.value.id).then((resp)=>{
    coach.value = resp.data
    const now = new Date();
    const data = {
      yearMonth: now.getFullYear() + '-' + (now.getMonth() + 1),
      coachId: user.value.id,
    }
    getMyCourseSchedules(data).then(res => {
      dateVal.value = res.data;
    })
  })

})
</script>

<style scoped>
.calender-c {
  color: #222222;
}
</style>
